<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-15 08:56:27
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-20 09:24:16
-->
<template>
   <div :class="prefixCls">
    <a-tabs v-model:value="currentTab" @change="handleTabChange">
      <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
        <ul>
          <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
            <!-- <a-icon :type="icon" :style="{ fontSize: '36px' }" /> -->
            <component :is="$antIcons[`${transIcon(icon)}Outlined`]" :style="{ fontSize: '36px' }" v-if="icon" />
          </li>
        </ul>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { IconFont } from '@/components/iconfont'
import { upperFirst } from '@/utils/lodashChunk'
import icons from './icons'
export default defineComponent({
    name: 'IconSelect',
    components: {},
    props: {
        prefixCls: {
            type: String,
            default: 'ant-pro-icon-selector'
        },
        // eslint-disable-next-line
        currentSelected: {
            type: String
        }
    },
    emits: [],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            selectedIcon: '',
            selectedI: {} as any,
            currentTab: 'directional',
            icons
        })
        const transIcon = (name) => {
            const newName = [...name]
            for (let i = 0; i < newName.length; i++) {
                if (newName[i] === '-') {
                    newName[i + 1] = upperFirst(newName[i + 1])
                }
            }
            return upperFirst(newName.join('').replace(/-/g, ''))
        }
        onMounted(() => {
            if (state.selectedIcon!=='') {
                autoSwitchTab()
            }
        })
        watch(
            () => state.selectedI,
            (v) => {
                console.log('selectedIcon',v);
               state.selectedIcon = v;
               autoSwitchTab()
            },
            { immediate: true }
        )

        function handleSelectedIcon (icon) {
            state.selectedIcon = icon
            ctx.emit('change', icon)
        }
        function handleTabChange (activeKey) {
            state.currentTab = activeKey
        }
        function autoSwitchTab () {
            icons.some(item => item.icons.some(icon => icon === state.selectedIcon) && (state.currentTab = item.key))
        }

        return {
            ...toRefs(state),
            props,
            handleSelectedIcon,
            handleTabChange,
            autoSwitchTab,
            upperFirst,
            transIcon,
            
        }
    }
})
</script>

<style lang='scss' scoped>
    ul{
        list-style: none;
        padding: 0;
        overflow-y: scroll;
        height: 250px;

    li{
      display: inline-block;
      padding: 12px;
      margin: 3px 0;
      border-radius: 2px;

      &:hover, &.active{
        // box-shadow: 0px 0px 5px 2px @primary-color;
        cursor: pointer;
        color: #ffffff;
        background-color: #1890ff;
      }
    }
  }
</style>
